<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="telephone=no,email=no" name="format-detection" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>我的</title>

    <link rel="stylesheet" href="css/reset.css" media="screen" title="no title">
    <link rel="stylesheet" href="css/invoices.css" media="screen" title="no title">
    <link rel="stylesheet" href="css/mescroll.min.css" media="screen" title="no title">
    <script src="js/flexible.js"></script>
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/cleave.min.js"></script>
    <script src="js/util.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/clipboard.min.js"></script>
    <!-- <script src="js/mescroll.min.js"></script> -->
    <script src="./js/bscroll.min.js"></script>

</head>

<body>

    <div id="change_history_page" class="change-history-page" v-cloak>
        <!-- 头部栏 -->
        <div class="title-bar">
            <div class="left-img" id="back">
                <img src="img/jt_l.png" alt="">
            </div>
            <div class="title">
                我的
            </div>
        </div>
        <!-- 选项卡 -->
        <nav>
            <ul>
                <li class="active" @click="toggle(0)" v-if="isIpone">
                    交易记录
                </li>
                <li class="active" @click="toggle(1)" v-if="!isIpone">
                    可兑换签纸贺
                </li>
                <li @click="toggle(2)">
                    兑换历史
                </li>
            </ul>
            <div class="line"></div>
        </nav>

        <!-- 对应显示的列表 -->
        <!-- 交易记录的数据列表 -->
        <div class="wrap1" v-show="num==0">
            <div class="wrap1-con1">
                <div class="wrap-left" v-show="num==0">
                    <div class="left" v-for="(item,index) in jy_data" :key="index">
                        <ul>
                            <li>活动名称：{{item.title}}</li>
                            <li>有效期至：{{item.time}}</li>
                            <li>
                                <div class="left-hj">
                                    合计可用额：
                                    <span>{{item.price}}元</span>
                                </div>
                                <div class="left-dh" @click="go_use()">
                                    去兑换
                                    <img src="./img/jt_r_blue.png" alt="右箭头">
                                </div>
                            </li>
                            <li>
                                <p>交易记录：</p>
                                <div @click="jl_show1()">
                                    <span>兑换10.00</span>
                                    /
                                    <span>充值1000.00</span>
                                    <img src="./img/jt_b_black.png" alt="下拉箭头" v-if="!jl_s" />
                                    <img src="./img/jt_b_black.png" alt="下拉箭头" class="img1" v-if="jl_s" />
                                </div>
                            </li>
                            <!-- 点击显示，隐藏交易记录  -->
                            <li v-if="jl_s">
                                <block v-for="(item,index) in timer" :key="item.id">
                                    <div class="tt">
                                        <div>
                                            <!-- :class="{'ac':item.flg}" -->
                                            <p :class="{'ac':item.flg}">
                                                <span></span>
                                            </p>
                                            {{item.time}}
                                        </div>
                                        <p :class="{'tt-red':item.flg}">{{item.price}}</p>
                                    </div>
                                </block>
                            </li>
                        </ul>
                    </div>

                   
                </div>
                <div class="sl">{{sl}}</div>
            </div>
        </div>
        <!-- 可兑换千纸鹤 -->
        <div class="wrap1 wrap2" v-show="num==1">
            <div class="wrap-con1">
                <div class="wrap-left" v-show="num==1">
                    <div class="left-q">
                        <div class="left-q-card">
                            <p>卡号：11111111111111</p>
                            <p>面值：1000元</p>
                        </div>
                        <div class="left-q-time">
                            有效期至：2020-07-31
                        </div>
                        <div class="left-q-us">
                            <div class="left-hj">
                                可兑换金额：
                                <span>1000元</span>
                            </div>
                            <div class="left-dh" @click="go_use()">
                                去兑换
                                <img src="./img/jt_r.png" alt="右箭头">
                            </div>
                        </div>
                    </div>
                   
                </div>
                <div class="sll">{{sll}}</div>
            </div>
        </div>
        <!-- 兑换历史的列表 手机+卡号-->
        <div class="wrap1 wrap3" v-show="num==2">
            <div class="wrap-con1">
                <div class="wrap-right" v-show="num==2" v-if="!isEmail">
                    <div class="right">
                        <div class="right-time">
                            兑换时间：2020-07-15 23：11：24
                        </div>
                        <div class="right-card">
                            <!-- 手机号登录 -->
                            <p v-if="isIpone">活动名称：积分兑换活动</p>
                            <!-- 卡号登录 -->
                            <p v-if="!isIpone">兑换卡号：1231231231231231</p>
                            <p class="right-card-je">
                                金额：<span>2300元</span>
                            </p>
                        </div>
                        <div class="right-end-time">
                            <p>查卡密/去使用截止至：2020-12-31</p>
                        </div>
                        <block v-for="(item,index) in historyData" :key="index">
                            <div class="right-list">
                                <img :src="item.cardInfo.brandImg" alt="logo">
                                <div class="right-list-content">
                                    <p>{{item.cardInfo.goodsName}}</p>
                                    <p>
                                        <span>使用说明 </span>
                                        <img src="./img/jt_r.png" alt="右箭头">
                                    </p>
                                </div>
                                <p @click="seeCard(item)" v-if="item.cardInfo.goodsType == '01'">
                                    {{item.cardInfo.isShowCard?'收起':'查卡密'}}
                                </p>
                                <p v-else @click="employ">去使用</p>
                            </div>
                            <!-- 点击查卡密，显示卡号密码等 -->
                            <div class="br-da" v-if="item.cardInfo.isShowCard">
                                <div class="right-list-cha">
                                    <div class="cha-card">
                                        <p>卡号：</p>
                                        <p> {{item.cardInfo.card}}</p>

                                        <!-- <p class="code"  :data-clipboard-text="item.cardInfo.card"  @click="copy">复制</p> -->

                                        <div class="fr btn">
                                            <input type="button" value="复制" class="copy-btn"
                                                :data-val="item.cardInfo.card">
                                        </div>
                                    </div>
                                    <div class="cha-card">
                                        <p>密码：</p>
                                        <p> {{item.cardInfo.password}}</p>

                                        <!-- <p class="code"  :data-clipboard-text="item.cardInfo.password"  @click="copy">复制</p>
                                         -->

                                        <div class="fr btn">
                                            <input type="button" value="复制" class="copy-btn"
                                                :data-val="item.cardInfo.password">
                                        </div>
                                    </div>
                                    <p>有效期至：{{item.cardInfo.expireDate}}</p>
                                </div>
                            </div>
                        </block>
                    </div>
                </div>
                  <!-- 这是邮箱兑换历史 -->
                <div class="right" v-show="num==2" v-if="isEmail">
                    <div class="right-email">
                        <p>兑换时间：2020-07-15 23：11：24</p>
                        <p class="right-email-je">
                            金额：<span>2300元</span>
                        </p>
                    </div>
                    <div class="right-card">
                        <p>活动名称：暑期福利</p>
                    </div>
                    <div class="right-end-time">
                        <p>查卡密/去使用截止至：2020-12-31</p>
                        <p @click="send()">发送到邮箱</p>
                    </div>
                    <block v-for="(item,index) in historyData" :key="index">
                        <div class="right-list">
                            <img :src="item.cardInfo.brandImg" alt="logo">
                            <div class="right-list-content">
                                <div class="right-list-content1">
                                    <p>{{item.cardInfo.goodsName}}</p>
                                    <p>X 1</p>
                                </div>
                                <p>
                                    <span>使用说明 </span>
                                    <img src="./img/jt_r.png" alt="右箭头">
                                </p>
                            </div>

                        </div>
                    </block>
                </div>
                <div class="sll">{{slll}}</div>
            </div>
        </div>

        <!-- 结束 -->
    </div>
</body>
<script type="text/javascript">
    var Vue = new Vue({
        el: "#change_history_page",
        data: {
            sl: "上拉加载数据~",
            sll: "上拉加载数据~",
            slll: "上拉加载数据~",
            isEmail: true,
            num: 0,//点击导航，显示对应的列表
            jl_s: false,//点击交易记录列表，是否显示交易时间
            isIpone: true,//手机号登陆和卡号登录显示，切换,false对应的是可兑换千纸鹤
            timer: [
                { id: 1, flg: false, time: ' 2020-05-30 21:05:21', price: '- 200.00', flg: false },
                { id: 1, flg: false, time: ' 2020-05-30 21:05:21', price: '- 200.00', flg: false },
                { id: 1, flg: false, time: ' 2020-05-30 21:05:21', price: '- 200.00', flg: false },
                { id: 2, flg: true, time: ' 2020-05-30 21:05:21', price: '+ 1000.00', flg: true }
            ],
            jy_data: [
                { id: 1, title: '暑期福利', time: '2020-03-01', price: 600 },
                { id: 1, title: '暑期福利', time: '2020-03-01', price: 600 },
                { id: 1, title: '暑期福利', time: '2020-03-01', price: 600 },
                { id: 1, title: '暑期福利', time: '2020-03-01', price: 600 },
                { id: 1, title: '暑期福利', time: '2020-03-01', price: 600 },
                { id: 1, title: '暑期福利', time: '2020-03-01', price: 600 },
                { id: 1, title: '暑期福利', time: '2020-03-01', price: 600 },
                { id: 1, title: '暑期福利', time: '2020-03-01', price: 600 },
                { id: 1, title: '暑期福利', time: '2020-03-01', price: 600 },
                { id: 1, title: '暑期福利', time: '2020-03-01', price: 600 }
            ],
            historyData: [
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "淘票票",
                        "goodsName": "淘票票电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "01",
                        "goodsId": "10086",
                    },


                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "美团",
                        "goodsName": "美团电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "02",
                        "goodsId": "100876"
                    }
                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "美团",
                        "goodsName": "美团电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "02",
                        "goodsId": "100876"
                    }
                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "淘票票",
                        "goodsName": "淘票票电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "01",
                        "goodsId": "10086",
                    },


                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "美团",
                        "goodsName": "美团电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "02",
                        "goodsId": "100876"
                    }
                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "美团",
                        "goodsName": "美团电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "02",
                        "goodsId": "100876"
                    }
                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "淘票票",
                        "goodsName": "淘票票电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "01",
                        "goodsId": "10086",
                    },


                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "美团",
                        "goodsName": "美团电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "02",
                        "goodsId": "100876"
                    }
                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "美团",
                        "goodsName": "美团电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "02",
                        "goodsId": "100876"
                    }
                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "淘票票",
                        "goodsName": "淘票票电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "01",
                        "goodsId": "10086",
                    },


                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "美团",
                        "goodsName": "美团电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "02",
                        "goodsId": "100876"
                    }
                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "美团",
                        "goodsName": "美团电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "02",
                        "goodsId": "100876"
                    }
                }

            ]
        },
        created() {
            //初始化数据
            this.initializeData();
            /**
             *  num=0；并为true，显示手机号登录，交易记录和兑换历史title显示活动名称，相反是卡号
             *  num=1;为false，显示卡号登录和title为卡号
             *  isEmail为true时，显示邮箱兑换历史页面，交易记录为手机号登录时的页面
             */
            this.num = 0;
            this.isIpone = true;
            this.isEmail = false;
        },
        mounted() {
            //初始化调用
            this.right('.wrap1');
        },
        methods: {
            right(k) {
                // 上拉加载
                var oScroll = new BScroll(k, {
                    click: true,//Vue中使用bscroll，点击事件会失效，加上这个属性就可以解决了
                    probeType: 1,//1一定时间触发事件，2实时触发scroll事件，3实时，swiper下也可以实时
                    //下拉刷新：可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
                    //这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载
                    pullUpLoad: {
                        threshold: 10
                    },
                    mouseWheel: {    // pc端同样能滑动
                        speed: 20,
                        invert: false
                    },
                    useTransition: false  // 防止iphone微信滑动卡顿
                });
                if (k == '.wrap1') {
                    oScroll.on("pullingUp", () => {//将函数写成箭头函数，this的指向就不会发生改变了
                        // if (this.sl == "上拉加载数据~") {
                            console.log('111')
                            this.sl = '数据加载中。。。';
                            setTimeout(() => {
                                var obj = { id: 1, title: '111', time: '111', price: 600 };
                                this.jy_data.push(obj);
                                this.sl = '没有更多数据了~';
                            }, 1000)
                            console.log('触发1')
                            oScroll.finishPullUp();//可以多次执行上拉刷新
                        // } else {
                        //     console.log('111-3333')
                        //     return false;
                        // }
                    });
                // } else if (k == '.wrap2') {
                //     oScroll.on("pullingUp", () => {//将函数写成箭头函数，this的指向就不会发生改变了
                //         // if (this.sll == "上拉加载数据~") {
                //             console.log('111')
                //             this.sll = '数据加载中。。。';
                //             // setTimeout(() => {
                //                 // var obj = { id: 1, title: '111', time: '111', price: 600 };
                //                 // this.jy_data.push(obj);
                //                 this.sll = '没有更多数据了~';
                //             // }, 1000)
                //             console.log('触发1')
                //             oScroll.finishPullUp();//可以多次执行上拉刷新
                //         // } else {
                //         //     console.log('111-3333')
                //         //     return false;
                //         // }
                //     });
                }else if (k == '.wrap3') {
                    oScroll.on("pullingUp", () => {//将函数写成箭头函数，this的指向就不会发生改变了
                        // if (this.slll != "上拉加载数据~") {
                        //     console.log('222-3333')
                        //     return false;
                        // } else {
                            console.log('222')
                            this.slll = '数据加载中。。。';
                            setTimeout(() => {
                                var obj = {
                                    "cardInfo": {
                                        "brandImg": "http://suo.im/6kBZbP",
                                        "brandName": "美团",
                                        "goodsName": "11111111",
                                        "expireDate": "1111111",
                                        "goodsType": "02",
                                        "goodsId": "100876"
                                    }
                                };
                                this.historyData.push(obj);
                                this.slll = '没有更多数据了~';
                            }, 1000)
                            console.log('触发2')
                            oScroll.finishPullUp();//可以多次执行上拉刷新
                        // }
                    });
                }
                oScroll.refresh();
            },
            // 点击头部选项卡
            toggle(k) {
                this.num = k;
                switch (k) {
                    case 0:
                        this.right('.wrap1');
                        console.log(11111)
                        break;
                    case 1:
                        this.right('.wrap2');
                        console.log(222222)
                        break;
                    default:
                        this.right('.wrap3');
                        console.log(333333)
                        break;
                }
            },
            //初始化
            initializeData() {
                for (var i = 0; i < this.historyData.length; i++) {
                    this.historyData[i].cardInfo.isShowCard = false;
                }
            },
            //点击查看卡密
            seeCard(item) {
                // this.$forceUpdate();
                console.log(item)
                item.cardInfo.card = "6789  3456  3456  6789";
                item.cardInfo.password = "6666  8888  3456  6789";
                item.cardInfo.isShowCard = !item.cardInfo.isShowCard;
                this.historyData = Object.assign([], this.historyData);
            },
            //使用说明
            goExplain() {
                window.location = "instructions.html";
            },
            //去使用
            employ() {

            },
            // 点击发送邮箱 
            send() {
                jQuery.toast('发送成功');
            },
            //点击交易记录，去兑换
            go_use() {

            },
            // 点击交易记录，显示明细
            jl_show1() {
                // this.$forceUpdate();
                console.log('显示')
                this.jl_s = !this.jl_s;
            }
        },

    })




    // /* jq */复制卡号和密码
    $(function () {
        //返回
        $("#back").on("click", function () {
            window.history.go(-1);
        });

        //复制到剪切板
        var clipboard = new ClipboardJS('.copy-btn', {
            text: function (that) {
                return $(that).data("val");
            }
        });
        clipboard.on('success', function (e) {
            console.log("success", e);
            $.toast("复制成功");
        });

        clipboard.on('error', function (e) {
            console.log("eror", e);
            $.toast("复制失败");
        });




        // 头部选项卡的步骤

        var nav = $('nav');
        var line = $('.line');

        var active = nav.find('.active');
        var pos = 0;
        var wid = 0;
        if (active.length) {
            pos = active.position().left;
            wid = active.width();
            line.css({
                left: pos,
                width: wid
            });
        }

        nav.find('ul li').click(function (e) {

            // $(this).css({color:"#F9404A",fontWeight:"bold"})
            if (!$(this).hasClass('active')) {
                var _this = $(this);
                nav.find('ul li').removeClass('active');
                // _this.css({color:'#9B9B9B'})
                var position = _this.position();
                var width = _this.width();
                if (position.left >= pos) {
                    // line.animate({ left: position.left - pos }
                    // ,100,function(){
                    //     line.animate({width:width},100)
                    // })
                    line.animate({
                        width: ((position.left - pos) + width)
                    }, 100, function () {

                        line.animate({
                            width: width,
                            left: position.left
                        }, 150);
                        _this.addClass('active');

                    });
                } else {

                    line.animate({
                        left: position.left,
                        // width: ((pos - position.left) + wid)
                    }, 300, function () {
                        line.animate({
                            width: width
                        }, 150);
                        _this.addClass('active');
                    });
                }

                // if(!_this.hasClass('active')){

                // }

                pos = position.left;
                wid = width;
            }
        });
    })
</script>

</html>